<template>
  <div class="wechat-group">    
    <div class="wxh">
      <div class="left">
        <div class="img-wrapper">
          <img :src="urlFn(wxh.img)">
        </div>
        <p>长按识别</p>
      </div>
      <div class="right">
        <p class="name">{{ wxh.name }}</p>
        <p class="desc" @click="showEwmFn(wxh.img)">{{ wxh.desc }}</p>
        <p class="slogan">{{ wxh.slogan }}</p>
      </div>
    </div>
    <ul class="list">
      <li class="yhg-li tip" @click="goWzFn()">天猫商家冲销量内部发放优惠券</li>
      <li class="yhg-li wz">
        <div class="wz1" @click="goWzFn(0)">优惠券库1</div>
        <div class="wz2" @click="goWzFn(1)">优惠券库2</div>
      </li>
    </ul>
    <ul class="list">
      <li class="msg-li" v-for="msg in msgArr" :key="msg.name">
        <div class="msg"><b>{{ msg.name }}</b>{{ msg.desc }}</div>
        <div class="copy" @click="copyFn()" :data-clipboard-text="msg.desc"><span>点击复制</span></div>
      </li>
    </ul>
    <ul class="list">
      <li class="qun-li" v-for="qun in group" :key="qun.name">
        <div class="left">
          <div class="name">{{ qun.name }}</div>
          <div class="desc">{{ qun.desc }}</div>
        </div>
        <div class="btn" @click="showEwmFn(qun.img)"><span>点击入群</span></div>
      </li>
    </ul>
    <transition name="slide">
    <div class="ewm-container" v-show="isShow">
      <div class="wrapper">
        <p class="notice">进群请阅读群公告，遵守群规</p>
        <div class="ewm">
          <img :src="ewmUrl">
          <p>长按识别</p>
        </div>
        <div class="btn" @click="isShow = false">返回</div>
      </div>
    </div>
    </transition>
    <footer class="jqqd">这世界有很多优惠是你不知道的~<br>更多优惠  敬请期待</footer>
    <div class="welcome" @click="goWzFn()">优惠谷官网 youhuigu.cn</div>
  </div>
</template>

<script>
import obj from './group'
import Clipboard from 'clipboard'
let clipboard = new Clipboard('.copy')
const QNURL = 'http://ostr59l0f.bkt.clouddn.com/wxGroup/'

export default {
  name: 'group',
  data () {
    return {
      wxh: obj.wxh, // 个人微信号
      msgArr: obj.msgArr, // 优惠信息
      group: obj.group, // 优惠群
      isShow: false, // 点击入群,展示二维码
      ewmUrl: '' // 二维码地址
    }
  },
  methods: {
    // 控制跳转到不同网站
    goWzFn (num) {
      if (num) {
        window.location.href = 'http://youhuigu.cn/' + num
      } else {
        window.location.href = 'http://youhuigu.cn'
      }
    },
    // 拼接二维码地址
    urlFn (img) {
      return QNURL + img + '?r=' + Math.random()
    },
    // 显示群二维码
    showEwmFn (img) {
      this.ewmUrl = this.urlFn(img)
      this.isShow = true
    },
    // 复制淘口令
    copyFn () {
      clipboard.on('success', function (e) {
        // 点击1次 打印1遍 点击2次 打印2次 ...
        // console.info('success Action:', e.action)
        // console.info('Text:', e.text)
        // console.info('Trigger:', e.trigger)
        e.trigger.style.backgroundColor = 'green'
        e.trigger.querySelector('span').innerHTML = '复制成功'
        e.clearSelection()
      })
      clipboard.on('error', function (e) {
        e.trigger.querySelector('span').innerHTML = '复制失败'
        // console.error('error Action:', e.action)
        // console.error('Trigger:', e.trigger)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wechat-group {
  .wxh {
    min-height: 130px;
    padding: 5px;
    background-color: #fff;
    border-bottom: 1px solid #c1c1c1;
    box-sizing: border-box;
    .left {
      float: left;
      text-align: center;
      width: 100px;
      font-size: 12px;
      line-height: 20px;
      .img-wrapper {
        height: 100px;
        & > img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .right {
      padding-left: 108px;
      font-size: 12px;
      line-height: 16px;
      color: #666;
      .name {
        font-size: 18px;
        line-height: 28px;
        color: #ef4136;
        font-weight: 700;  
      }
      .slogan {
        margin-top: 10px;
      }
    }
  }
  .list {
    margin-top: 10px;
    border-top: 1px solid #c1c1c1;
    background-color: #fff;
    .msg-li {
      border-bottom: 1px solid #c1c1c1;
      display: flex;
      .msg {
        flex: 7;
        padding: 5px;
        font-size: 12px;
        line-height: 18px;
        & > b {
          font-size: 18px;
          color: #ef4136;
        }
      }
      .copy {
        flex: 3;
        background-color: #FA123E;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .qun-li {
      display: flex;
      border-bottom: 1px solid #c1c1c1;
      .left {
        flex: 7;
        padding: 10px 5px 10px;
        font-size: 12px;
        line-height: 18px;
        .name {
          padding-bottom: 5px;
          font-size: 18px;
          color: #ef4136;
          font-weight: 700;
        }
      }
      .btn {
        flex: 3;
        background-color: #FA123E;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .yhg-li {
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px solid #c1c1c1;
      &.tip {
        font-size: 18px;
      }
      &.wz {
        display: flex;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        .wz1 {
          flex: 1;
          background-color: #c06;
        }
        .wz2 {
          flex: 1;
          background-color: #099;
          border-left: 1px solid #c1c1c1;
        }
      }
    }
  }
  .jqqd {
    padding: 20px 0 60px;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: #666;
  }
  .ewm-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #996;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s linear;
    &.slide-enter-to, &.slide-leave-active {
      transform: translate3d(0, 0, 0);
    }
    &.slide-enter-active, &.slide-leave-to {
      transform: translate3d(100%, 0, 0);
    }
    .wrapper {
      padding: 30px;
      border-radius: 10px;
      background-color: #fff;
      box-shadow:2px 2px 5px #333333;
      .notice {
        color: red;
        font-size: 16px;
        line-height: 28px;
        padding-bottom: 10px;
        font-weight: 700;
        text-align: center;
      }
      .ewm {
        padding: 10px;
        width: 200px;
        min-height: 218px;
        text-align: center;
        border: 4px solid #ccc;
        & > img {
          width: 100%;
          height: 100%;
        }
      }
      .btn {
        margin-top: 30px;
        font-size: 26px;
        background-color: #f66;
        color: #fff;
        height: 42px;
        line-height: 42px;
        text-align: center;
        border-radius: 5px;
      }
    }
  }
  .welcome {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    max-width: 600px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 22px;
  }
}
</style>
